var editor,taoDialog;
KindEditor.options.cssData = 'widget {background: #cecece;height: 40px;display: block;border: 2px dashed #999;line-height: 40px; padding: 5px;margin:0 10px;width:80%;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' version=\'1.1\'><text x=\'20\' y=\'33\' fill=\'red\' font-size=\'20\'>装备小卡片占位符</text>   </svg>")}';

KindEditor.ready(function(K) {
    K.lang({
        card: '插入卡片',
        tao: '插入卡片'
    })
    K.plugin('card', function(K) {
        var self = this, name = 'card';
        function openDialog(){
            var dialog = K.dialog({
                width : 600,
                height: 600,
                title : '插入卡片',
                body : '<div style="margin:10px;"><h6>选择商品</h6><form>关键词:<input id="gearKeyWords"> id:<input id="gearId" style="width:60px;"> <button type="button" onclick="searchGear()">搜索</button></form><div id="gearList" class="gearList"></div></div>',
                closeBtn : {
                    name : '关闭',
                    click : function(e) {
                        dialog.remove();
                    }
                },
            });
        }
        self.clickToolbar(name, openDialog);
    });
    K.plugin('tao', function(K) {
        var self = this, name = 'tao';
        function openDialog(){
             taoDialog = K.dialog({
                width : 600,
                height: 400,
                title : '插入淘宝链接',
                body : '<div style="margin:10px;">输入淘宝地址:<input id="taoUrl" type="text"> <button type="button" id="taoSearchButton" onclick="searchTao()">查询</button>' +
                '<br><div style="border-bottom:2px solid #ccc">&nbsp;</div><br>' +
                '<input type="hidden" id="chanelId" /> ' +
                '<div>商品名称: <input id="taoname" type="text" style="width:300px;">建议不超过20个汉字 </div>' +
                '<div>售价: <input id="taoprice" type="text" style="width:60px;"> </div>' +
                '<div>图片: <img src="" id="taopic" width="100" height="100"><button type="button" onclick="uploadTaoPic();">上传</button> ' +
                '<div><button type="button" onclick="insertTao()">确定</button>' +
                '</div>',
                closeBtn : {
                    name : '关闭',
                    click : function(e) {
                        taoDialog.remove();
                    }
                },
            });
        }
        self.clickToolbar(name, openDialog);
    });
    var items = K.options.items
    items.push('|')
    items.push('card')
    items.push('tao')
    editor = K.create('textarea[name="content"]', {
        items,
        allowFileManager : true,
        uploadJson: './index.php?c=admin&a=uploadKindEditorImg',
        newlineTag:'p',
        filterMode : true,
        htmlTags:{
            p : ['style','color', 'align'],
            font : ['style','color', 'size', 'face'],
            span : ['style','style','color', 'align'],
            div : ['style','class', 'align'],
            a : ['style','class', 'href', 'target', 'name'],
            embed : ['style','src', 'width', 'height', 'type', 'loop', 'autostart', 'quality',
                'style', 'align', 'allowscriptaccess', '/'],
            img : ['style','src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style','data-source','/'],
            hr : ['style','class', '/'],
            br : ['/'],
            'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : ['style','align'],
            'tbody,tr,strong,b,sub,sup,em,i,u,strike' : ['style'],
            'widget': ['template','gear_id','supplier_id','title','channel_id']
        }
    });
});

function searchTao(){
    $('#taoSearchButton').attr('disabled','disabled').text('查询中...');
    $.getJSON('/ajax/AdminSearchTao',{url:$('#taoUrl').val()},
         function(result){
            if(result!=null&&!result.error){
                $('#taoname').val(result.name);
                $('#taopic').attr('src',result.pic);
                $('#taoprice').val(result.price);
                $('#chanelId').val(result.id);
            }else{
                alert('error');
            }
             $('#taoSearchButton').removeAttr('disabled').text('查询');
         }
    );
}

function uploadTaoPic(){
    $('#picChannelId').val( $('#chanelId').val());
    $('#picChannelPrice').val( $('#taoprice').val());
    $('#picFile').trigger('click');
}

function insertTao(){
    var item = {type:'taobao',channel_id:$('#chanelId').val(),title: $('#taoname').val(),pic:$('#taopic').attr('pic'),price:$('#taoprice').val()};
    editor.insertHtml('<widget template="'+item.type+'" channel_id="'+item.channel_id+'" title="'+item.title+'" ></widget><br>')
    taoDialog.remove();
}

function searchGear(){
    let keywords = $('#gearKeyWords').val().trim()
    let gearId = $('#gearId').val().trim()
    if(keywords == '' && gearId == ''){
        return
    }
    $.getJSON('/ajax/adminSearchGearChannel',{keywords:keywords,gearId:gearId},(data)=>{
        if(data.code !=0){
        return
    }
    var gearList = data.data
    let html = template('gearListTemp', data)
    $('#gearList').html(html)
    $('.card').click(function(){
        let item = gearList[$(this).data('index')]
        let newItem = {
            template: item.type,
            gear_id: item.gearId,
            supplier_id: item.supplier_id,
            title: item.title
        }
        editor.insertHtml('<widget template="'+item.type+'" gear_id="'+item.gearId+'" supplier_id="'+item.supplier_id+'" title="'+item.title+'"></widget><br>')
    })
})
}